<template>
	<view class="container">
		<view class="order-tab">
			<view class="tab-item" :class="i==tab_index?'select':''" v-for="(item,i) in tabList" :key="i" @click="tab_index=i">
				<text>{{item.text}}</text>
			</view>
		</view>
		
		<view class="list">
			<view class="s-item" @click="toDetail">
				<view class="info-box">
					<view class="t-1">
						<view class="name">
							家政服务名称
						</view>
						<view class="status" :style="{color:true ? '#FF4A4A' : '#FFCC26'}">
							<text v-if="true">未上门</text>
							<text v-if="false">待接单</text>
						</view>
					</view>
					<view class="t-2">
						<text>服务时间：</text>2024-05-20 今日21:00
					</view>
					<view class="t-3">
						<text>服务地址：</text>郑州市XXX区详情地址详情地址详情地址
					</view>
				</view>
				<button>指派</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList:[
					{
						text:'全部',
						value:1
					},{
						text:'待接单',
						value:1
					},{
						text:'未上门',
						value:1
					}
				],
				tab_index:0
			};
		},
		
		methods:{
			toDetail(){
				uni.navigateTo({
					url:`/pagesRegion/dispatchCenter/detail`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{
	.order-tab{
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		padding: 24rpx 104rpx 12rpx; 
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;
		z-index: 3;
		.tab-item{
			text{
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
				line-height: 44rpx;
				position: relative;
			}
			&.select{
				text{
					font-weight: bold;
					font-size: 32rpx;
					color: #E72A2A;
					line-height: 44rpx;
					&::after{
						content: '';
						width: 52rpx;
						height: 8rpx;
						background: #E72A2A;
						border-radius: 4rpx;
						position: absolute;
						top: calc(100% + 4rpx);
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}
		}
	}
	
	.list{
		padding: 0 22rpx;
		box-sizing: border-box;
		.s-item{
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 26rpx 0 0;
			box-sizing: border-box;
			margin-top: 20rpx;
		
			.info-box{
				width: 100%;
				padding: 0 20rpx 0 24rpx;
				box-sizing: border-box;
				.t-1{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.name{
						font-weight: bold;
						font-size: 32rpx;
						color: #000000;
						line-height: 44rpx;
					}
					.status{
						font-weight: 400;
						font-size: 32rpx;
						line-height: 44rpx;
					}
				}
				.t-2,.t-3{
					font-weight: bold;
					font-size: 28rpx;
					color: #000000;
					line-height: 40rpx;
					margin-top: 24rpx;
					text{
						font-weight: 400;
					}
				}
			}
			&>button{
				width: 100%;
				height: 92rpx;
				background: linear-gradient( 86deg, #FFA233 0%, #FB4C4C 100%);
				border-radius: 0rpx 0rpx 20rpx 20rpx;
				font-weight: bold;
				font-size: 36rpx;
				color: #FFFFFF;
				line-height: 92rpx;
				margin-top: 44rpx;
			}
		}
	}
}
</style>
